<template>
  <div style="width: 100%">
    <div class="my-table-container">
      <div v-if="!noHeader" class="my-table-header">
        <div class="my-table-title">{{ title }}</div>
        <div class="my-table-btn">
          <slot name="table-btn" />
        </div>
      </div>
      <div :class="{'my-table-area':pdShow}">
        <el-table
          :data="dataSource"
          :header-cell-style="headerStyle"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :highlight-current-row="highlightcurrentrow"
          class="my-table"
          @current-change="handleTableCurrentChange"
          @sort-change="sortChange"
          @selection-change="handleSelectionChange"
        >
          <template v-if="columns">
            <el-table-column
              v-if="selection"
              type="selection"
              width="30"
            />
            <el-table-column
              v-if="displayNumber"
              prop="keyOrder"
              label="序号"
              align="center"
              width="100"
              sortable="custom"
            >
              <template slot-scope="scope">
                {{ serialcustom ? scope.row.serialNumber : ((pagination.pageSize * (pagination.current - 1)) + scope.$index + 1) }}
              </template>
            </el-table-column>
            <el-table-column
              v-for="col in columns"
              :key="col.key"
              :prop="col.dataIndex"
              :label="col.title"
              :width="col.width || ''"
              :align="col.align"
              :sortable="col.sortable?'custom':false"
            >
              <template slot-scope="scope">
                <div v-if="col.isBtn">
                  <btn-setting :row="scope.row" :scope="scope" :options="btnOptions" />
                </div>
                <slot
                  v-else-if="col.hasSlot"
                  :name="col.dataIndex"
                  :row="scope.row"
                />
                <div v-else-if="col.render">
                  {{ col.render(scope.row[col.dataIndex], scope.row) }}
                </div>
                <div v-else-if="col.renderRedColor">
                  <span :class="{red:scope.row[col.dataIndex]===5}">{{ col.renderRedColor(scope.row[col.dataIndex]) }}</span>
                </div>
                <div v-else-if="col.redColor">
                  <span style="color:red;">{{ scope.row[col.dataIndex] }}</span>
                </div>
                <div v-else-if="col.ishx">
                  <span>{{ `${scope.row[col.dataIndex]}房${scope.row[col.dataIndex1]}厅${scope.row[col.dataIndex2]}卫` }}</span>
                </div>
                <div v-else>{{ scope.row[col.dataIndex] }}</div>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div v-if="paginationShow" class="pagination">
          <el-pagination
            :current-page="pagination.current"
            :page-size="pagination.pageSize"
            :page-sizes="pageSizes"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BtnSetting from './btn-setting'
export default {
  name: 'MyTable',
  components: { BtnSetting },
  props: {
    title: {
      type: String,
      default: ''
    },
    noHeader: {
      type: Boolean,
      default: false
    },
    displayNumber: {
      type: Boolean,
      default: false
    },
    highlightcurrentrow: {
      type: Boolean,
      default: false
    },
    dataSource: {
      type: Array,
      default: null
    },
    columns: {
      type: Array,
      default: null
    },
    serialcustom: {
      type: Boolean,
      default: false
    },
    btnOptions: {
      type: Array,
      default: null
    },
    pagination: {
      type: Object,
      default: function() {
        return {
          current: 1,
          pageSize: 10,
          total: 0
        }
      }
    },
    paginationShow: {
      type: Boolean,
      default: true
    },
    pageChange: {
      type: Function,
      default: function() {}
    },
    /* 多选框序列 */
    selection: {
      type: Boolean,
      default: false
    },
    pdShow: {
      type: Boolean,
      default: true
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100]
      }
    }
  },
  data() {
    return {
      headerStyle: {
        background: '#F5F7FA',
        color: '#222',
        fontSize: '14px'
      }
    }
  },
  methods: {
    handleTableCurrentChange(currentRow, oldCurrentRow) {
      this.$emit('current-change', currentRow, oldCurrentRow)
    },
    handleCurrentChange(current) {
      if (this.pageChange) {
        this.$emit('page-change', current)
      }
    },
    handleSizeChange(size) {
      if (this.pageChange) {
        this.$emit('page-change', 1, size)
      }
    },
    sortChange(column, prop, order) {
      this.$emit('orderRule', column)
    },
    handleSelectionChange(selections) {
      this.$emit('selections', selections)
    }
  }
}
</script>

<style lang="less" scoped>
.my-table-container {
  background: #fff;
  .my-table-header {
    padding: 16px 18px;
    overflow: hidden;
    .my-table-title {
      float: left;
      color: #303133;
      font-size: 16px;
      font-weight: bold;
      line-height: 32px;
    }
    .my-table-btn {
      float: right;
    }
  }
  .my-table-area {
    width: 100%;
    padding: 0 18px;
    .my-table {
      width: 100%;
      /* 这里的设置是IE11的table宽度不会撑开 */
      ::v-deep .el-table__header {
        width: 100% !important;
      }
      ::v-deep .el-table__body {
        width: 100% !important;
        .red{
            color: red;
        }
      }
    }
    .pagination {
      padding: 8px 0;
      text-align: center;
    }
  }
}
</style>
